<template>
	<view class="main">
		<view class="fusion">
			<block v-for="item in fusion" :key="item.id">
				<view class="fusion-item" @click="toPage('/pages/fusion/detail',{id:item.id})">
					<view class="fusion-item-image">
						<image :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="fusion-item-info">
						<view class="fusion-item-info-status">
							{{item.end_time<1?"已结束":"合成中"}}
						</view>
						<view class="fusion-item-info-title">
							{{item.title}}
						</view>
						<view class="fusion-item-info-tags">
							<text class="title">限量</text>
							<text>{{item.all_count}}份</text>
							<text>剩余{{item.all_count-item.sale_count||0}}份</text>
						</view>
						<view class="fusion-item-info-time">
							结束时间:
							<u-count-down :time="item.end_time" format="DD天HH小时mm分ss秒"></u-count-down>
						</view>
					</view>
				</view>
			</block>
			<block v-if="!loading&&list.length<1">
				<Empty text="暂无数据"></Empty>
			</block>
		</view>
	</view>
</template>

<script>
	import Empty from "@/components/Empty.vue"	
	import { mapState, mapMutations } from 'vuex'
	import {mixin} from '@/Mixins/mixin.js'
	export default {
		mixins:[mixin],
		components:{Empty},
		data() {
			return {
				loading:true,
				pageSize:10,
				page:1,
				list:[]
			};
		},
		computed: {
			...mapState(['userInfo','subscribeDay']),
			fusion(){
				return this.list.map(item=>{
					let date = new Date(item.end_time.replace(/-/g,'/')).getTime()
					let newDate = new Date().getTime()
					item.end_time = date - newDate
					return item
				})
			}
		},
		onShow() {
			this.gethecheng()
		},
		onPullDownRefresh(){
			console.log('下拉刷新')
			this.page = 1
			this.gethecheng()
		},
		onReachBottom(){
			this.gethecheng()
		},
		methods:{
			//合成列表
			async gethecheng(){
				let res = await this.$http({
					url:this.$api.getcomlist,
					method: 'GET',
					hideLoading: true,
					data:{
						page:this.page,
						pageSize:this.pageSize,
					}
					
				})
				this.loading = false
				console.log('[合成列表]',res)
				if(res.code==200){
					if(this.page==1){
						this.list=res.data.data;
					}else{
						if(res.data.total>this.list.length){
							this.list = this.list.concat(res.data.data)
							this.page += 1
						}
					}
					
				}
			},
		},
		filters:{
			formatTime(e){
				let date = new Date(e.replace(/-/g,'/')).getTime()
				let newDate = new Date().getTime()
				return date - newDate
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding:0 28rpx;
		.fusion{
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 40rpx;
				margin-top: 22rpx;
				background:#FFFFFF url(@/static/ico/bg.png) right top no-repeat;
				background-size:374rpx 466rpx;
				box-shadow: 2px 2px 8px 6px rgba(230, 230, 230, 0.5);
				background-position:100% 40rpx;
				height: 240rpx;
				box-sizing: border-box;
				&-image{
					width: 220rpx;
					height: 220rpx;
					margin: 10rpx;
					image{
						width: 220rpx;
						height:220rpx;
						border-radius: 40rpx;
					}
				}
				&-info{
					width: calc(100% - 240rpx);
					padding:46rpx 20rpx 20rpx 20rpx;
					position: relative;
					&-title{
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						line-height: 44rpx;
					}
					&-status{
						width: 108rpx;
						height: 36rpx;
						background: #F2E0BC;
						border-radius: 4rpx 20rpx 4rpx 20rpx;
						font-size: 22rpx;
						font-weight: 600;
						color: #181512;
						line-height: 36rpx;
						text-align: center;
						position: absolute;
						right: 0;
						top: -5rpx;
					}
					&-tags{
						font-size: 0;
						margin-top: 14rpx;
						text{
							display: inline-block;
							font-size: 22rpx;
							font-weight: 600;
							color: #E8D6B5;
							padding: 2rpx 8rpx;
							background: #4B4B4C;
							border-radius: 4rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							&.title{
								margin-right: 0;
								background: #F2E0BC;
								color: #181512;
							}
						}
						
					}
					&-time{
						margin-top: 14rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						::v-deep .u-count-down__text{
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
							line-height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>
